<script setup lang="ts">
import {IconMenu, IconUser} from '@arco-design/web-vue/es/icon';
import {type Component, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "@/stores/counter";

const router = useRouter();
const route = useRoute();
const store = useStore()


interface MenuType {
  title: string
  icon?: Component
  name?: string // 路由名字
  child?: MenuType[]
}

const menuList: MenuType[] = [
  {title: "首页", icon: IconMenu, name: "admin_home", child: []},
  {
    title: "个人中心", icon: IconUser, name: "admin_my_center", child: [
      {title: "我的信息", icon: IconMenu, name: "admin_my_center_info", child: []},
    ]
  },
  {
    title: "文章管理", icon: IconUser, name: "admin_article", child: [
      {title: "文章列表", icon: IconMenu, name: "admin_article_list"},
    ]
  },
  {
    title: "用户管理", icon: IconUser, name: "admin_user", child: [
      {title: "用户列表", icon: IconMenu, name: "admin_user_list"},
    ]
  },
  {
    title: "群聊管理", icon: IconUser, name: "admin_chat_group", child: [
      {title: "聊天记录", icon: IconMenu, name: "admin_chat_group_list"},
    ]
  },
  {
    title: "系统管理", icon: IconUser, name: "admin_system", child: [
      {title: "菜单管理", icon: IconMenu, name: "admin_system_menu_list"},
      {title: "日志管理", icon: IconMenu, name: "admin_system_log_list"},
      {title: "广告管理", icon: IconMenu, name: "admin_system_advert_list"},
    ]
  },
]

const selectedKeys = ref([route.name])
const openKeys = ref([route.matched[1].name])

function clickMenu(key: string) {
  router.push({
    name: key,
  })
}

function collapse(collapse: boolean) {
  store.setCollapse(collapse)
}

watch(() => route.name, () => {
  selectedKeys.value = [route.name]
  openKeys.value = [route.matched[1].name]
})
</script>

<template>
  <div class="blog_menu">
    <a-menu
        @menu-item-click="clickMenu" v-model:selectedKeys="selectedKeys" v-model:openKeys="openKeys"
        show-collapse-button
        @collapse="collapse"
    >
      <template v-for="item in menuList" :key="item.path">
        <a-menu-item :key="item.name" v-if="item.child?.length === 0">
          <template #icon>
            <component :is="item.icon"></component>
          </template>
          {{ item.title }}
        </a-menu-item>
        <a-sub-menu v-if="item.child?.length !== 0" :key="item.name">
          <template #icon>
            <component :is="item.icon"></component>
          </template>
          <template #title>{{ item.title }}</template>
          <a-menu-item v-for="childItem in item.child" :key="childItem.name">{{ childItem.title }}</a-menu-item>
        </a-sub-menu>
      </template>
    </a-menu>
  </div>
</template>

<style lang="scss">
.blog_menu {
  .arco-menu {
    position: inherit;
  }

  .arco-menu-collapse-button {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
    opacity: 0;
    transition: all .3s;
  }
}

aside:hover {
  .blog_menu {
    .arco-menu-collapse-button {
      opacity: 1;
    }
  }
}
</style>
